<!--
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <grid-component class="lg-description" v-bind="$attrs" :style="`--lg-description-label-w: ${labelWidth || '7em'}`">
    <slot name="prepend"></slot>
    <item-component v-for="x in options" :key="x.field" class="lg-description-item" v-bind="x.colProps">
      <div class="lg-description-label" v-bind="x.labelProps">
        <slot :name="x.slots.label">
          {{ x.label }}
        </slot>
      </div>
      <div class="lg-description-value" v-bind="x.valueProps">
        <!-- 插槽 -->
        <slot v-if="x.slots.default" :name="x.slots.default" :value="x.value">
          {{ x.value }}
        </slot>
        <!-- 自定义组件 -->
        <template v-else-if="x.component">
          <component :is="x.component" v-bind="x.componentProps" :[x.valueProp]="x.value" />
        </template>
        <!-- 其他类型 -->
        <template v-else>
          {{ x.value }}
        </template>
      </div>
    </item-component>
    <slot name="append"></slot>
  </grid-component>
</template>

<script lang="ts" setup name="LgDescription">
import { computed } from 'vue';
import { ColProps, RowProps, Col, Row } from 'tdesign-vue-next';
import { IConfigSchema, IDetailSchema, LgGrid, LgGridProps, IComponentProps, LgText } from '@/soar';
import { getDetails, Div } from './utils';
import { LgDescriptionProps } from '../types';

interface Props<T> extends LgDescriptionProps<T> {
  /**
   * 表单配置
   */
  schema: IDetailSchema<T>[] | IConfigSchema<T>[];
  /**
   * 初始数据
   */
  data?: any;
  /**
   * 宫格类型，lg：使用LgGrid，rw：使用 t-row t-col
   */
  gridType?: 'lg' | 'rw';
  /**
   * LgGrid 宫格配置属性
   */
  gridProps?: LgGridProps | RowProps;
  /**
   * 列配置属性
   */
  colProps?: IComponentProps | ColProps;
  /**
   * label宽度
   */
  labelWidth?: string;
  /**
   * 标题元素配置
   */
  labelProps?: IComponentProps;
  /**
   * 值元素配置
   */
  valueProps?: IComponentProps;
}
// 接收属性
const props = withDefaults(defineProps<Props<unknown>>(), {
  data: {},
});

const ItemComponent = computed(() => (props.gridType === 'rw' ? Col : Div));
const GridComponent = computed(() => (props.gridType === 'rw' ? Row : LgGrid));

// 初始化配置
const options = computed(() => {
  const data = props.data ?? {};
  const list: any[] = getDetails(props.schema);
  // 合并配置
  const colProps = props.colProps ?? {};
  const labelProps = props.labelProps ?? {};
  const valueProps = props.valueProps ?? {};
  for (let i = 0; i < list.length; i++) {
    const x = list[i];
    if (typeof x.formatter === 'function') {
      x.value = x.formatter(data, data[x.field]);
    } else {
      x.value = data[x.field];
    }
    x.colProps = { ...colProps, ...x.colProps };
    x.labelProps = { ...labelProps, ...x.labelProps };
    x.valueProps = { ...valueProps, ...x.valueProps };
  }
  return list;
});
</script>
<script lang="ts">
export default {
  name: 'LgDescription',
};
</script>

<style lang="less">
.lg-description {
  @border: 1px solid var(--td-component-border);
  border-top: @border;
  border-left: @border;
  border-right: @border;
  align-items: stretch;
  .lg-description-item {
    display: flex;
    border-bottom: @border;
  }
  .lg-description-item:last-child {
    max-width: 100% !important;
  }
  .lg-description-label {
    min-width: var(--lg-description-label-w, 100px);
    max-width: var(--lg-description-label-w, 100px);
    background: var(--app-color-bg-secondary);
    min-height: var(--app-height-component);
    padding: var(--app-space);
  }
  .lg-description-value {
    padding: var(--app-space);
    color: var(--app-color-text-primary);
    flex: 1;
    word-wrap: break-word;
    word-break: break-word;
  }
}
.lg-detail-img {
  max-width: 100px;
  max-height: 100px;
  cursor: pointer;
}
</style>
